<template>
  <el-dialog
    title="选择节目"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="66%">
    <div>
      <el-row type="flex" :gutter="10" class="row-bg">
        <el-col :span="18">
          <el-alert
            v-if="showTip"
            title="选择的节目分辨率不一致 可能达不到理想的播放效果"
            type="warning"
            close-text="知道了">
          </el-alert>
          <div class="mod-config">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
              <el-form-item>
                <el-input size="mini" v-model="dataForm.title" placeholder="节目名称" clearable
                          @change="getDataList()"></el-input>
              </el-form-item>
              <!--<el-form-item>-->
                <!--<el-input size="mini" v-model="dataForm.width" placeholder="宽" clearable-->
                          <!--@change="getDataList()"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item>-->
                <!--<el-input size="mini" v-model="dataForm.height" placeholder="高" clearable-->
                          <!--@change="getDataList()"></el-input>-->
              <!--</el-form-item>-->
              <el-form-item>
                <el-button size="mini" @click="getDataList()">查询</el-button>
              </el-form-item>
            </el-form>
            <el-table
              size="mini"
              :data="dataList"
              height="280"
              v-loading="dataListLoading"
              @selection-change="selectionChangeHandle"
              @select="selectHandle"
              style="width: 100%;"
              row-key="id"
              ref="multipleTable"
            >
              <el-table-column
                type="selection"
                header-align="center"
                align="center"
                reserve-selection
                width="30">
              </el-table-column>
              <el-table-column
                prop="id"
                header-align="center"
                align="center"
                label="ID"
                width="40">
              </el-table-column>
              <el-table-column
                prop="programName"
                header-align="center"
                align="center"
                label="节目名称">
              </el-table-column>
              <el-table-column
                prop="canvasHeight"
                header-align="center"
                align="center"
                label="分辨率">
                <template slot-scope="scope">
                 {{scope.row.width}} * {{scope.row.height}}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              small
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, prev, pager, next">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
          </div>
        </el-col>
        <el-col :span="1">
          <div style="margin-top: 160px">
            <!--<el-button  icon="el-icon-d-arrow-right" @click="addDevice" size="mini"  circle></el-button>-->
          </div>
        </el-col>
        <el-col :span="5">
          <el-table
            size="mini"
            :data="dataListSelections"
            height="280"
            @selection-change="selectionChangeHandle"
            style="width: 100%;margin-top: 60px">
            <el-table-column
              prop="programName"
              header-align="center"
              align="center"
              label="已选">
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px;margin-left: 35px;">
            <el-button type="primary" size="small" @click="submit()">完成选择</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<style scoped>
  .el-dialog__body {
    padding: 10px !important;
  }

  .el-button.is-circle {
    padding: 7px !important;
  }
</style>
<script>
  export default {
    data: function () {
      return {
        showTip: false,
        dataForm: {
          title: '',
          description: '',
          width: '',
          height: ''
        },
        data: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        visible: false,
        params: 0,
      }
    },
    watch:{
      params(){
        this.getDataList()
      }
    },
    activated () {
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList: function () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/program/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.title,
            'type': 1,
            'description': this.dataForm.description,
            'width': this.dataForm.width,
            'height': this.dataForm.height
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            let itemList = this.dataList.find(item=>{
              return item.id === this.params;
            });
            if(itemList){
              this.init([itemList]);
              this.submit();
            }
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      selectHandle (selection, row) {
        if (!this.verifyRatio(row)) {
          this.showTip = true
        }
      },
      reload: function (event) {
        this.getDataList()
      },
      init: function (data,params) {
        this.visible = true
        if(params>0){
          this.params = params;
          return false;
        }
        this.dataListSelections = data
        this.$nextTick(() => {
          this.$refs.multipleTable.clearSelection()
          data.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        })
      },
      submit () {
        if (!this.verifyAllRatio()) {
          this.$message.error('选择的节目分辨率不一致 可能达不到理想的播放效果')
        }
        this.$emit('done', this.dataListSelections)
        this.visible = false
      },
      verifyRatio (item) {
        for (let i = 0; i < this.dataListSelections.length; i++) {
          if (this.dataListSelections[i].canvasWidth !== item.canvasWidth ||
            this.dataListSelections[i].canvasHeight !== item.canvasHeight) {
            return false
          }
        }
        return true
      },
      verifyAllRatio () {
        let list = this.dataListSelections
        list.sort(function (m, n) {
          if (m.canvasWidth < n.canvasWidth) return -1
          else if (m.canvasWidth > n.canvasWidth) return 1
          else return 0
        })
        if (list[0].canvasWidth !== list[list.length - 1].canvasWidth) {
          return false
        }
        list.sort(function (m, n) {
          if (m.canvasHeight < n.canvasHeight) return -1
          else if (m.canvasHeight > n.canvasHeight) return 1
          else return 0
        })
        if (list[0].canvasHeight !== list[list.length - 1].canvasHeight) {
          return false
        }
        return true
      }
    }
  }
</script>
